<template>
    <div>
        <el-card class="!border-none" shadow="never">
            <el-button type="primary" class="mb-4"  v-perms="['article.banner/officePlaceAdd']" @click="onClick_add">
                <template #icon>
                    <icon name="el-icon-Plus"/>
                </template>
                新建
            </el-button>
            <el-table size="large" v-loading="pager.loading" :data="pager.lists">
                <el-table-column label="序号" type="index" min-width="80" />
                <el-table-column label="图片" min-width="160" prop="banner_url">
                    <template #default="{ row }">
                        <div class="flex align-middle">
                            <el-image style="width: 38px; height: 38px"
                                    :src="row.banner_url"
                                    :zoom-rate="1.2"
                                    :max-scale="7"
                                    :min-scale="0.2" 
                                    fit="contain"
                                    :preview-teleported="true"
                                    :preview-src-list="[row.banner_url]"></el-image>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="标题" min-width="180" prop="name"/>
                <el-table-column label="排序" min-width="180" prop="sort"/>
                <el-table-column label="图片状态" min-width="120" prop="type">
                    <template #default="{ row }">
                        <span v-if="row.is_enable == 1">启用</span>
                        <el-link v-else type="danger" :underline="false">停用</el-link>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="240" fixed="right">
                    <template #default="{ row }">
                        <el-link class="link mr-4" v-perms="['article.banner/officePlaceDetail']" type="primary" :underline="false" @click="handleEdit(row)">编辑</el-link>
                        <el-link class="link mr-4" v-perms="['article.banner/officePlaceDelete']" type="danger" :underline="false" @click="handleDel(row)">删除</el-link>
                        <el-link v-if="row.is_enable != 1" class="link" v-perms="['article.banner/officePlaceUpdateStatus']" type="primary" :underline="false" @click="handleOpen(row)">启用</el-link>
                        <el-link v-if="row.is_enable == 1" class="link" v-perms="['article.banner/officePlaceUpdateStatus']" type="danger" :underline="false" @click="handleClose(row)">停用</el-link>
                        <el-link class="link ml-4" type="primary" :underline="false" @click="handleData(row)">统计</el-link>
                    </template>
                </el-table-column>
            </el-table>
            <div class="flex justify-end mt-4">
                <pagination v-model="pager" @change="getLists" />
            </div>
        </el-card>
        <el-dialog
                v-model="showIcon"
                :title="formData.id? '编辑场地Banner': '新建场地Banner'"
                width="900"
                @close="handleDiaClose"
        >
            <el-form
                ref="formRef"
                :model="formData"
                :rules="rules"
                label-width="180"
                require-asterisk-position="right"
            >
                <el-form-item label="标题" prop="name">
                    <div class="w-80">
                        <el-input
                            v-model="formData.name"
                            placeholder="请输入标题"
                            type="text"
                            maxlength="15"
                            show-word-limit
                            clearable
                        />
                    </div>
                </el-form-item>

                <el-form-item label="banner图片" prop="banner_url">
					<div class="w-80">
						<div>
							<material-picker v-model="formData.banner_url" :limit="1"/>
						</div>
						<div class="form-tips">建议尺寸：750*336px</div>
					</div>
				</el-form-item>

                <el-form-item label="视频">
                    <div>
                        <material-picker v-model="formData.video_url" type="video" :limit="1"/>
                    </div>
                </el-form-item>

                <el-form-item label="排序">
                    <div class="w-80">
                        <el-input
                            v-model="formData.sort"
                            placeholder="请输入"
                            type="number"
                            maxlength="10"
                            show-word-limit
                            clearable
                        />
                    </div>
                </el-form-item>

                <el-form-item label="跳转地址" prop="link">
                    <div class="w-9/12">
                        <el-input
                            v-model="formData.link"
                            placeholder="请输入"
                            type="text"
                            clearable
                        >
                        </el-input>
                    </div>
                </el-form-item>
                <div class="pl-44">可在<span style="color: #FF6900;">运营管理—资讯列表</span>中配置地址详情</div>
                <el-form-item label="启用状态" prop="is_enable">
                    <div class="w-80">
                        <!-- :disabled="!route.query.id" -->
                        <el-radio-group v-model="formData.is_enable">
                            <!-- works when >=2.6.0, recommended ✔️ not work when <2.6.0 ❌ -->
                            <!--              <el-radio value="Value 1">Option 1</el-radio>-->
                            <el-radio :label="1">启用</el-radio>
                            <el-radio :label="0">停用</el-radio>
                        </el-radio-group>
                    </div>
                </el-form-item>
                
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="onCancel">取消</el-button>
                    <el-button v-perms="['article.banner/officePlaceEdit']" type="primary" @click="onSubmit" :loading="loading">确认</el-button>
                </div>
            </template>
        </el-dialog>
        <banner_data ref="bannerRef"></banner_data>
    </div>
</template>
<script lang="ts" setup name="headIcon">
import { usePaging } from '@/hooks/usePaging';
import { officePlaceLists, officePlaceDetail, officePlaceEdit, officePlaceUpdateStatus, officePlaceAdd, officePlaceDelete } from '@/api/resource';
import type {FormInstance} from 'element-plus';
import feedback from '@/utils/feedback'
import banner_data from './banner_data.vue';
const bannerRef = ref();
const handleData = (row:any) => {
    bannerRef.value.init(row.id);
}
const queryParams:any = reactive({
		
})
const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: officePlaceLists,
    params: queryParams
})
const formRef = shallowRef<FormInstance>()
const showIcon = ref(false);
const formData:any = reactive({
    id: '',
    name: '',
    banner_url: '',
    video_url: '',
    is_enable: 1,
    link: '',
    sort: ''
})
const rules = reactive({
    name: [{required: true, message: '请输入标签名称', trigger: 'blur'}],
    banner_url: [{required: true, message: '请选择头像框图片圆形', trigger: 'blur'}],
})
const handleDiaClose = () => {
    console.log('===')
    setTimeout(function () {
        formRef.value?.clearValidate();//消除校验,这里的setTimeOut不能去掉,去掉之后会不生效
        formRef.value?.resetFields();
    },30);
}

const onCancel = () => {
    setTimeout(function () {
        formRef.value?.clearValidate();//消除校验,这里的setTimeOut不能去掉,去掉之后会不生效
        formRef.value?.resetFields();
    },30);
    showIcon.value = false
}
const loading = ref(false)
const onSubmit = async() => {
    try{
        await formRef.value?.validate()
        loading.value = true;
        console.log(formData)
        if (formData.id) {
            await officePlaceEdit(formData)
        } else {
            await officePlaceAdd(formData)
        }
        showIcon.value = false;
        getLists()
    }catch(error){
        console.log(error)
    }
}

const onClick_add = () => {
    formData.id = '';
    formData.name = '';
    formData.play_time = '';
    formData.banner_url = '';
    formData.is_enable = 1;
    formData.link = '';
    showIcon.value = true;
}

const handleEdit = async (row:any) => {
    const res = await officePlaceDetail({id: row.id});
    Object.keys(formData).forEach((key) => {
        //@ts-ignore
        formData[key] = res[key]
    })
    loading.value = false;
    showIcon.value = true;
}
const handleDel = async (row:any) => {
    console.log(row)
    try{
        await feedback.confirm('是否确认删除该图片')
        await officePlaceDelete({
            id: row.id,
        })
        getLists();
    }catch(error){
        console.log(error)
    }
}

const handleOpen = async (row:any) => {
    try{
        await feedback.confirm('启用之后，图片正常显示')
        await officePlaceUpdateStatus({
            id: row.id,
            is_enable: 1
        })
        getLists();
    }catch(error){
        console.log(error)
    }
}
const handleClose = async (row:any) => {
    try{
        await feedback.confirm('停用之后，该图片不可展示')
        await officePlaceUpdateStatus({
            id: row.id,
            is_enable: 0
        })
        getLists();
    }catch(error){
        console.log(error)
    }
}

onMounted(async () => {
    getLists();
});
</script>